<template>
	<view class="container">
		<view class="fixed-top" v-if="currentTab === 'homePage'">
			<van-icon size="50rpx" class="fixed-top-icon" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
			<input class="search-bar" type="text" placeholder="请输入您要搜索的商品" v-model="searchContent" />
			<!-- 添加搜索按钮 -->
			<van-button type="primary" size="small" @click="handleSearch()">搜索</van-button>
		</view>
		<view class="top-nav">
			<!-- 选项卡 -->
			<view class="tab-item" :class="{ active: currentTab === 'homePage' }" @click="switchTab('homePage')">推荐
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'luckyBox' }" @click="switchTab('luckyBox')">抽盒
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'playerShow' }" @click="switchTab('playerShow')">玩家秀
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'wishList' }" @click="switchTab('wishList')">心愿单
			</view>
		</view>
		<view v-if="currentTab === 'homePage'">
			<homePage></homePage>
		</view>
		<view v-else-if="currentTab === 'luckyBox'">
			<luckyBox></luckyBox>
		</view>
		<view v-else-if="currentTab === 'playerShow'">
			<playerShow></playerShow>
		</view>
		<view v-else-if="currentTab === 'wishList'">
			<wishList></wishList>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	computed
} from 'vue'
import homePage from "@/components/homePage/homePage.vue"
import luckyBox from "@/components/luckyBox/luckyBox.vue"
import playerShow from "@/components/playerShow/playerShow.vue"
import wishList from "@/components/wishList/wishList.vue"
import waterFall from "@/pages/waterfall/waterfall.vue"
const currentTab = ref('homePage')
const tabsComponents = {
	homePage,
	luckyBox,
	playerShow,
	wishList
};
const currentComponent = computed(() => tabsComponents[currentTab.value]);
// 搜索内容
const searchContent = ref("")
const switchTab = (tab) => {
	currentTab.value = tab;
};
// 搜索按钮
const handleSearch = () => {
	console.log("当前搜索内容:", searchContent.value)
	if (!searchContent.value) {
		uni.showToast({
			title: '请输入搜索内容',
			icon: 'none'
		})
		return
	}
	uni.navigateTo({
		url: `/pages/searchView/searchView?searchContent=${searchContent.value}`
	})
}
</script>

<style lang="scss" scoped>
.container{
	.fixed-top{
		margin-top: 10rpx;
		.search-bar{
			margin: 0 20rpx;	
			width: 80%;
			border-radius: 20rpx;
			border: 1rpx solid #3b3131;
			padding: 10rpx;	
		}
	}
}
.fixed-top {
	display: flex;
	margin: 0 20rpx;
	align-items: center;

	.search-bar {
		flex-grow: 1;
	}
}

.top-nav {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	margin: 10rpx 0;

	.tab-item {
		cursor: pointer;
		color: #c5c5c5;
	}

	.tab-item.active {
		color: black;
	}
}
</style>